import { listenCssVar_mana } from '../../../../../element/css/Func/listenCssVar/classes/cla_listenCssVar_mana';
import { mouse_leftbotton } from '../../../../../element/Event/Func/keyboardEventSpecialKeyCheck';
import { create_ListenEvent_mana } from '../../../../../element/Event/listenEvent_mana';
// eslint-disable-next-line no-unused-vars
import { unit_listenEvent_mana } from '../../../../../element/Event/listenEvent_mana/Classes/cla_unit_listenEvent_mana';
import { getNum } from '../../../../../Func/uniFunc/Func';
import { forBindEventThis } from '../../../../Func/eventBind';
import { get_dragId } from '../../cla_win_direct_drag_mana';
import { direct_drag_dataMana } from './cla_direct_drag_dataMana';

const direct_drag_operateTag = 'direct_drag_operate';

const drag_prop_eventBind = 'eventBind';

/**
 * css 变量控制
 */
let cssvarObj;

// const drag_prop_eventMana = 'eventMana';
/**
 * 当前 处理的 元素 的 EventMana
 * @type {unit_listenEvent_mana}
 */
let eventM;

class direct_drag_operate extends direct_drag_dataMana {
  get [Symbol.toStringTag]() {
    return direct_drag_operateTag;
  }

  /**
   * 给元素 注册 初始 事件
   * @param {HTMLElement} element 绑定元素
   */
  constructor(element) {
    super(element);

    // 给 事件 绑定 this
    forBindEventThis(this, drag_prop_eventBind);

    // 事件 管理
    this.eventMana = create_ListenEvent_mana(get_dragId(element));
    eventM = this.eventMana;

    // 移入
    eventM.addEventListen(
      this.targetEl,
      'mouseenter',
      this.eventBind.targetEl_mouse_enter
    );

    // 移除
    eventM.addEventListen(
      this.targetEl,
      'mouseleave',
      this.eventBind.targetEl_mouse_leave
    );

    // 给元素 添加 cssvar 变量管理
    this.cssvarObj = new listenCssVar_mana(element);
  }

  /**
   * 鼠标 移入 元素
   */
  targetEl_mouse_enter() {
    eventM = this.eventMana;

    // enter down
    eventM.addEventListen(
      this.targetEl,
      'mousedown',
      this.eventBind.targetEl_mouse_enter_leftDown
    );

    // enter up
    eventM.addEventListen(
      this.targetEl,
      'mouseup',
      this.eventBind.targetEl_mouse_enter_leftDown_leftUp
    );
  }

  /**
   * 鼠标 移出 元素
   */
  targetEl_mouse_leave() {
    eventM = this.eventMana;

    // remove down
    eventM.removeEventListen(
      this.targetEl,
      'mousedown',
      this.eventBind.targetEl_mouse_enter_leftDown
    );

    // remove up
    eventM.removeEventListen(
      this.targetEl,
      'mouseup',
      this.eventBind.targetEl_mouse_enter_leftDown_leftUp
    );

    // // remove win move
    // eventM.removeEventListen(
    //   window,
    //   'mousemove',
    //   this.eventBind.win_mouse_move
    // );
  }

  /**
   * 鼠标 移入 左键按下
   * @param {MouseEvent} event
   */
  targetEl_mouse_enter_leftDown(event) {
    if (!mouse_leftbotton(event)) {
      return;
    }
    eventM = this.eventMana;

    this.startTop = event.currentTarget.offsetTop;

    this.mouseTop = event.pageY - this.startTop;

    this.startLeft = event.currentTarget.offsetLeft;

    this.mouseLeft = event.pageX - this.startLeft;

    cssvarObj = this.cssvarObj;

    // win move
    eventM.addEventListen(window, 'mousemove', this.eventBind.win_mouse_move);
  }

  /**
   * 鼠标 移入 左键按下 抬起
   * @param {MouseEvent} event
   */
  targetEl_mouse_enter_leftDown_leftUp(event) {
    if (!mouse_leftbotton(event)) {
      return;
    }
    eventM = this.eventMana;

    // remove win move
    eventM.removeEventListen(
      window,
      'mousemove',
      this.eventBind.win_mouse_move
    );
  }

  /**
   * 鼠标 全局 移动
   * @param {MouseEvent} event
   */
  win_mouse_move(event) {
    // followEl(event.pageY - this.mouseTop, event.pageX - this.mouseLeft);
    // console.log(this.framekey_lock);

    /**
     * 逻辑 修订
     * 一帧帧 触发 不然 或有 延迟 的 动画
     */
    if (this.framekey_lock) {
      return;
    }

    // 帧 锁定
    this.framekey_lock = true;

    requestAnimationFrame(() => {
      // 帧 解锁
      this.framekey_lock = false;
      // console.log('render');
      followEl(event.pageY - this.mouseTop, event.pageX - this.mouseLeft);
    });

    // /**
    //  * 降频
    //  */

    // if (this.framekey_lockey < 2) {
    //   return;
    // }
    // requestAnimationFrame(() => {
    //   followEl(event.pageY - this.mouseTop, event.pageX - this.mouseLeft);
    // });
  }
}

/**
 * 根据 top 和 left 的 值 设置 cssVar
 * @param {string} top 默认不带单位 px
 * @param {string} left 默认不带单位 px
 */
function followEl(top, left) {
  //   console.log(top, left);
  cssvarObj.setCssVar('--top', top + 'px');
  cssvarObj.setCssVar('--left', left + 'px');
}

/**
 * 设置 dragEl 的 默认 初始 位置
 * @param {HTMLElement} element
 * @param {string} top
 * @param {String} left
 */
function set_dragEl_top_left(element, top, left) {
  cssvarObj = new listenCssVar_mana(element);

  followEl(getNum(top), getNum(left));
}
export { direct_drag_operate, set_dragEl_top_left };
